<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0"/>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/style.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="__PUBLIC__/js/public.js" type="text/javascript" charset="utf-8"></script>
    <title>我的-优惠券</title>
</head>
<body>
<div id="coupon">
    <div class="couponBar">
        <a href="javascript:void(0);" id="noUse" class="on" >未使用</a>
        <a href="javascript:void(0);" id="used" >已使用</a>
        <a href="javascript:void(0);" id="expired" >已过期</a>
    </div>
    <div class="couponCon">

    </div>
    <div class="couponCon expired" style="display: none;">

    </div>
    <div class="couponCon expired" style="display: none;">

    </div>
</div>
<script type="text/javascript">
    $('.couponBar a').on('click', function () {
        var index = $(this).index();
        $(this).addClass('on').siblings().removeClass('on')
        $('#coupon .couponCon').eq(index).show().siblings('.couponCon').hide()
        getList(index);
    })


    function getList(status) {
        $('.couponCon').eq(status).html();

        //0未使用1已使用2已过期'
        $.ajax({
            url:url() + "index.php?s=/Home/Coupon/getCouponList",
            data:{'status':status},
            dataType:"json",
            type:"get",
            success:function (data) {
                if(data){
                    var html1 = '';
                    $.each(data.data, function (i, items) {
                        html1+='<div class="couponList">';
                        if(items.status == 0){
                            html1+='<img class="bg" src="__PUBLIC__/images/bg_youhuijuan@2x.png"/>';
                        }else{
                            html1+='<img class="bg" src="__PUBLIC__/images/yishiyong_youhuijuan_bg@2x.png"/>';
                        }

                        html1+='<div class="listCon">';
                        html1+='<div class="priceCon">';
                        html1+='<span class="listPrice">￥<i class="price">'+items.money+'</i>店铺优惠券</span>';
                        html1+='<span class="use">满<span class="num">'+items.condition_money+'</span>元使用</span>';
                        html1+='<div class="listTime"><i class="icon"></i>有效期<span class="term">'+items.starttime+'- '+items.endtime+'</span></div>';
                        if(items.status == 0){
                            html1+='<span class="receive">立即使用</span>';
                        }
                        else if(items.status == 1){
                            html1+='<span class="receive">已使用</span>';
                        }
                        else if(items.status == 2){
                            html1+='<span class="receive">已过期</span>';
                        }
                        html1+='</div>';
                        html1+='</div>';
                        html1+='</div>';
                    })
                    $('.couponCon').eq(status).html(html1);
                }else{
                    $('.couponCon').eq(status).html("暂无数据")
                }
            },
            error: function (response, ajaxOptions, thrownError) {
                alert("加载失败");
            }
        })
    }

    getList(0);
</script>
</body>
</html>